<template>
  <el-carousel :interval="5000" arrow="always" :height="imgHeight" class="carousel">
    <el-carousel-item ref="imgHeight" v-for="item in carousels" :key="item">
      <img :src="item">
    </el-carousel-item>
  </el-carousel>
</template>
<script>
export default {
  name: 'carousel',
  mounted() {
    window.onresize = () => {
      // 通过点语法获取img的height属性值
      this.imgHeight = `${this.$refs.imgHeight['0'].height}px`;
    };
  },
  data() {
    return {
      imgHeight: '560px',
      carousels: [
        '/static/yiqi/carsous/keji.png',
        '/static/yiqi/carsous/zongzhi.png',
        '/static/yiqi/carsous/fanwei.png'
      ]
    };
  }
};
</script>
<style scoped lang="scss">
  .carousel {
    img {
      width: 100%;
    }
  }
</style>
